@extends('layouts._app')
@section('content')
    <link rel="stylesheet" type="text/css" href="{{asset('static/admin/lib/select/formSelects-v4.css')}}"/>
    <style>
        #markdown-editor {
            z-index: 999999;
        }
    </style>
    <body>
    <div class="wrap-container">
        @include('layouts._flash')
        <input type="hidden">
        <div id="LAY-popup-user-add" class="layui-layer-content">
            <div class="layui-form" lay-filter="layuiadmin-form-label" style="padding: 20px 30px 0 0;">
                {!! Form::open(['route' => 'blog.article.store','class'=>'layui-form','style'=>'width: 90%;padding-top: 20px;','method'=>'post']) !!}
                {!! Form::hidden('filter','true') !!}
                <div class="layui-form-item">
                    {!! Form::label('','* 标题：',['class'=>'layui-form-label','style'=>'color:red']) !!}
                    <div class="layui-input-block">
                        {!! Form::text('title','',['required','lay-verify'=>'required','class'=>'layui-input','placeholder'=>'请输入标题']) !!}
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    {!! Form::label('','分类：',['class'=>'layui-form-label']) !!}
                    <div class="layui-input-inline">
                        <select name="category_id" lay-search lay-filter="category">
                            <option value="">请选择</option>
                            <optgroup label="文章分类">
                                @foreach($category as $key => $value)
                                    @if($value['static'] == 1)
                                        <option value="{{$value['id']}}">{{$value['name']}}</option>
                                    @endif
                                @endforeach
                            </optgroup>
                            <optgroup label="问题分类">
                                @foreach($category as $key => $value)
                                    @if($value['static'] == 3)
                                        <option value="{{$value['id']}}">{{$value['name']}}</option>
                                    @endif
                                @endforeach
                            </optgroup>
                        </select>
                    </div>
                    <div class="layui-input-inline" style="width: 120px">
                        <select name="parent_id" lay-search lay-filter="parent" disabled>
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    {!! Form::label('','标签：',['class'=>'layui-form-label']) !!}
                    <div class="layui-input-inline">
                        <select name="tag" lay-search multiple xm-select="select4">
                            <option value="">请选择</option>
                            @foreach($label as $key => $value)
                                <option value="{{$value['id']}}">{{$value['name']}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    {!! Form::label('','封面图：',['class'=>'layui-form-label']) !!}
                    <div class="layui-input-block">
                        <img title="封面图" alt="封面图" id="img_show"
                             style="display: none;"
                             src="{{asset('static/admin/icon/35508.png')}}">
                        <button type="button" style="display: none;float: right;"
                                class="layui-btn layui-btn-small layui-btn-danger delBtn">
                            <i class="layui-icon">&#xe640;</i>
                        </button>
                        <div class="layui-box layui-upload-button">
                            {!! Form::file('',['id'=>'file0','onchange'=>'previewImages(this,0)']) !!}
                            <span class="layui-upload-icon"><i class="layui-icon"></i>上传图片</span>
                        </div>
                    </div>
                    {!! Form::hidden('pic','',['id'=>'pic']) !!}
                </div>
                <br>
                <div class="layui-form-item">
                    {!! Form::label('','是否显示：',['class'=>'layui-form-label']) !!}
                    <div class="layui-input-block">
                        <input type="radio" name="is_show" value="1" title="是" checked>
                        <input type="radio" name="is_show" value="2" title="否">
                    </div>
                </div>
                <div class="layui-form-item">
                    {!! Form::label('','是否置顶：',['class'=>'layui-form-label']) !!}
                    <div class="layui-input-block">
                        <input type="radio" name="root" value="2" title="是" checked>
                        <input type="radio" name="root" value="1" title="否">
                    </div>
                </div>
                <div class="layui-form-item">
                    {!! Form::label('','是否允许评论：',['class'=>'layui-form-label']) !!}
                    <div class="layui-input-block">
                        <input type="radio" name="is" value="1" title="允许" checked>
                        <input type="radio" name="is" value="2" title="不允许">
                    </div>
                </div>
                <div class="layui-form-item">
                    {!! Form::label('','简介：',['class'=>'layui-form-label']) !!}
                    <div class="layui-input-block">
                        {!! Form::textarea('intro',"",['class'=>'layui-textarea']) !!}
                    </div>
                </div>
                <div class="layui-form-item">
                    {!! Form::label('','内容：',['class'=>'layui-form-label']) !!}
                    <div class="layui-input-block">
                        @if($user->info->editor == 1)
                            <div id="markdown-editor">
                        <textarea style="display:none;" name="markdown">
# 耀眼博客 提示 初始值

### 多语言代码高亮 Codes

#### 行内代码 Inline code

执行命令：`npm install marked`

#### 缩进风格

即缩进四个空格，也做为实现类似`<pre>`预格式化文本(Preformatted Text)的功能。

    <?php
                                echo "Hello world!";
                                ?>

预格式化文本：

    | First Header  | Second Header |
    | ------------- | ------------- |
    | Content Cell  | Content Cell  |
    | Content Cell  | Content Cell  |
#### java代码

```java
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello World");
    }
}
```
#### JS代码　

```javascript
function test(){
	console.log("Hello world!");
}

(function(){
    var box = function(){
        return box.fn.init();
    };

    box.prototype = box.fn = {
        init : function(){
            console.log('box.init()');

			return this;
        },

		add : function(str){
			alert("add", str);

			return this;
		},

		remove : function(str){
			alert("remove", str);

			return this;
		}
    };

    box.fn.init.prototype = box.fn;

    window.box =box;
})();

var testBox = box();
testBox.add("jQuery").remove("jQuery");
```

#### HTML代码 HTML codes

```html
<!DOCTYPE html>
<html>
    <head>
        <mate charest="utf-8"/>
        <title>Hello world!</title>
    </head>
    <body>
        <h1>Hello world!</h1>
    </body>
</html>
```
### 列表 Lists

#### 无序列表（减号）Unordered Lists (-)

- 列表一
- 列表二
- 列表三

#### 无序列表（星号）Unordered Lists (*)

* 列表一
* 列表二
* 列表三

#### 无序列表（加号和嵌套）Unordered Lists (+)

+ 列表一
+ 列表二
    + 列表二-1
    + 列表二-2
    + 列表二-3
+ 列表三
    * 列表一
    * 列表二
    * 列表三

#### 有序列表 Ordered Lists (-)

1. 第一行
2. 第二行
3. 第三行

#### GFM task list

- [x] GFM task list 1
- [x] GFM task list 2
- [ ] GFM task list 3
    - [ ] GFM task list 3-1
    - [ ] GFM task list 3-2
    - [ ] GFM task list 3-3
- [ ] GFM task list 4
    - [ ] GFM task list 4-1
    - [ ] GFM task list 4-2

----### 绘制表格 Tables

| 项目        | 价格   |  数量  |
| --------   | -----:  | :----:  |
| 计算机      | $1600   |   5     |
| 手机        |   $12   |   12   |
| 管线        |    $1    |  234  |


| Function name | Description                    |
| ------------- | ------------------------------ |
| `help()`      | Display the help window.       |
| `destroy()`   | **Destroy your computer!**     |

| Left-Aligned  | Center Aligned  | Right Aligned |
| :------------ |:---------------:| -----:|
| col 3 is      | some wordy text | $1600 |
| col 2 is      | centered        |   $12 |
| zebra stripes | are neat        |    $1 |



### 科学公式 TeX(KaTeX)

$$E=mc^2$$

行内的公式$$E=mc^2$$行内的公式，行内的$$E=mc^2$$公式。

$$\(\sqrt{3x-1}+(1+x)^2\)$$

$$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$$
多行公式：

```math
\displaystyle
\left( \sum\_{k=1}^n a\_k b\_k \right)^2
\leq
\left( \sum\_{k=1}^n a\_k^2 \right)
\left( \sum\_{k=1}^n b\_k^2 \right)
```
```katex
\displaystyle
    \frac{1}{
        \Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{
        \frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {
        1+\frac{e^{-6\pi}}
        {1+\frac{e^{-8\pi}}
         {1+\cdots} }
        }
    }
```
### 绘制流程图 Flowchart

```flow
st=>start: 用户登陆
op=>operation: 登陆操作
cond=>condition: 登陆成功 Yes or No?
e=>end: 进入后台

st->op->cond
cond(yes)->e
cond(no)->op
```

### 绘制序列图 Sequence Diagram

```seq
Andrew->China: Says Hello
Note right of China: China thinks\nabout it
China-->Andrew: How are you?
Andrew->>China: I am good thanks!
```

### End
                        </textarea>
                            </div>
                            <link rel="stylesheet" type="text/css"
                                  href="{{asset('static/markdown/css/editormd.css')}}"/>
                            <script type="text/javascript" src="{{asset('static/markdown/editormd.min.js')}}"
                                    charset="utf-8"></script>
                            <script>
                                var testEditor = editormd("markdown-editor", {
                                    width: '100%',
                                    height: 600,
                                    previewTheme: 'default',
                                    editorTheme: 'pastel-on-dark',
                                    lineWrapping: true, // 编辑框不换行
                                    codeFold: true, // 代码折叠
                                    placeholder: '请输入...',
                                    syncScrolling: true,
                                    saveHTMLToTextarea: true, // 保存 HTML 到 Textarea
                                    searchReplace: true,
                                    watch: true, // 实时预览
                                    toolbar: true, // 工具栏
                                    previewCodeHighlight: true, // 预览 HTML 的代码块高亮，默认开启
                                    emoji: true,
                                    taskList: true,
                                    tocm: true, // Using [TOCM]
                                    tex: true, // 开启科学公式TeX语言支持，默认关闭
                                    flowChart: true, // 开启流程图支持，默认关闭
                                    sequenceDiagram: true, // 开启时序/序列图支持，默认关闭,
                                    imageUpload: true,
                                    imageFormats: ['jpg', 'jpeg', 'gif', 'png', 'bmp', 'webp'],
                                    imageUploadURL: '{{config('app.url')}}' + '/upload?user=blog&category=article&get=editormd-image-file&filter=true&post=markdown',
                                    path: "../../../static/markdown/lib/",   //你的path路径（原资源文件中lib包在我们项目中所放的位置）
                                    theme: "dark",//工具栏主题
                                });
                            </script>
                        @else
                            <textarea name="html" id="UEditor"></textarea>
                            <script type="text/javascript" charset="utf-8"
                                    src="{{asset('static/ueditor/ueditor.config.js')}}"></script>
                            <script type="text/javascript" charset="utf-8"
                                    src="{{asset('static/ueditor/ueditor.all.min.js')}}"></script>
                            <script>
                                UE.getEditor('UEditor');
                            </script>
                        @endif
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        {!! Form::submit('确认',['class'=>'layui-btn','lay-filter'=>'formDemo','lay-submit']) !!}
                    </div>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
    <script src="{{asset('static/admin/layui/layui.js')}}" type="text/javascript" charset="utf-8"></script>
    <script src="{{asset('js/jquery.min.js')}}" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="{{asset('static/admin/lib/select/formSelects-v4.js')}}"
            charset="utf-8"></script>
    <script type="text/javascript" src="{{asset('js/upload.js')}}"></script>
    <script>
        //Demo
        layui.use(['form', 'jquery'], function () {
            var form = layui.form();
            $ = layui.jquery;
            form.render();
            $('.delBtn').click(function () {
                $(this).attr('style', 'display:none');
                $("#pic").val('');
                var img = $("#img_show");
                img.attr('src', '{{asset('static/admin/icon/35508.png')}}');
                img.attr('style', 'display:none');
            })
            form.on('select(category)', function (proData) {
                $.ajax({
                    type: 'GET',
                    url: "/blog/article/create",
                    data: {parent_id: proData.value},
                    dataType: "json",
                    complete: function (XHR) {
                        XHR = null;
                    },
                    error: function (xhr) {//获取ajax的错误信息
                        layer.alert(xhr.responseText, "Failed", function () {
                            layer.closeAll();
                        });
                    },
                    success: function (response) {
                        if (response.code == 403) {
                            layer.msg(response.msg, {icon: 4, time: 3000})
                            return false;
                        }
                        if (response.code != 200) {
                            layer.msg(response.msg, {icon: 5, time: 3000});
                            return false;
                        }
                        var pro = response.data;
                        var proHtml = '<option value="">请选择</option>';
                        for (var i = 0; i < pro.length; i++) {
                            proHtml += '<option value="' + pro[i].id + '">' + pro[i].name + '</option>';
                        }
                        //初始化省数据
                        $("select[name=parent_id]").html(proHtml).removeAttr("disabled");
                        form.render();
                    }
                });
            });
        })
    </script>
    </body>
@endsection
